<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:body>
        <ui:composition template="./../template/main.xhtml">
            <ui:define name="content">
                <h1 class="title ui-widget-header ui-corner-all ">QUẢN LÝ KHUYẾN MÃI</h1>
                <p:messages id="messages"/>
                <h:form>
                    <p:commandButton id="btnCreate" update=":formCreate" oncomplete="PF('dialogCreate').show()" icon="icon-create" title="Thêm" value="Thêm"/>
                </h:form>
                <h:form id="formDataTable">
                    <p:dataTable style="text-align: center" id="promotionform" var="promotion" value="#{promotionController.promotionList}" paginator="true" rows="10" paginatorPosition="bottom" 
                                 paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}" rowsPerPageTemplate="5,10,15" 
                                 emptyMessage="Không có khuyến mãi">

                        <p:column headerText="ID">
                            <h:outputText value="#{promotion.id}" />
                        </p:column>
                        
                        <p:column headerText="Sản phẩm">
                            <h:outputText value="#{promotion.phoneCode.phone.name}" />
                        </p:column>
                        
                        <p:column headerText="Màu">
                            <h:outputText value="#{promotion.phoneCode.color.name}" />
                        </p:column>

                        <p:column headerText="Bắt đầu">
                            <h:outputText value="#{promotion.startDay}" />
                        </p:column>
                        
                        <p:column headerText="Kết thúc">
                            <h:outputText value="#{promotion.endDay}" />
                        </p:column>
                        
                        <p:column headerText="Khuyến mãi">
                            <h:outputText value="#{promotion.discount}" />
                        </p:column>
                        
                        <p:column headerText="Mô tả">
                            <h:outputText value="#{promotion.description}" />
                        </p:column>

                        <p:column>
                            <p:commandButton style="padding-right: 5px;" id="btnUpdate" update=":formUpdate" oncomplete="PF('dialogUpdate').show()" icon="ui-icon ui-icon-wrench" title="Sửa">
                                <f:setPropertyActionListener value="#{promotion}" target="#{promotionController.selectedPromotion}" />  
                            </p:commandButton>
                            <p:commandButton id="btnDelete" update=":formDelete" oncomplete="PF('confirmation').show()" icon="ui-icon-close" title="Xóa">
                                <f:setPropertyActionListener value="#{promotion}" target="#{promotionController.selectedPromotion}" />  
                            </p:commandButton>
                        </p:column>
                    </p:dataTable>  
                </h:form>
                <!--Create-->
                <h:form id="formCreate">
                    <p:dialog header="Thêm" widgetVar="dialogCreate" resizable="false" 
                              showEffect="fade" hideEffect="fade" modal="true">  
                        <h:panelGrid cellpadding="10" id="display" columns="2" styleClass="my-panel-grid">  

                            <h:outputLabel value="Tên SP:"/>
                            <p:selectOneMenu value="#{promotionController.selectedPromotion.phoneCode.phone.id}">
                                <f:selectItem itemValue="#{null}" itemLabel="Chọn sản phẩm"/>
                                <f:selectItems value="#{promotionController.phoneList}" var="phoneList" 
                                               itemValue="#{phoneList.id}" itemLabel="#{phoneList.name}"/>
                                <p:ajax update="color"/>
                            </p:selectOneMenu>

                            <h:outputLabel value="Màu:" />
                            <p:selectOneMenu id="color" value="#{promotionController.selectedPromotion.phoneCode.color.id}">
                                <f:selectItem itemValue="#{null}" itemLabel="Chọn màu"/>
                                <f:selectItems value="#{promotionController.phoneCodeList}" var="phoneCodeList" 
                                               itemValue="#{phoneCodeList.color.id}" itemLabel="#{phoneCodeList.color.name}"/>
                            </p:selectOneMenu>
                            
                            <h:outputText value="Bắt đầu:"/>
                            <p:calendar value="#{promotionController.selectedPromotion.startDay}" 
                                    navigator="true" yearRange="c-100:c-0" maxdate="31/12/2020" 
                                    pattern="dd/MM/yyyy" showOn="button" readonlyInput="true">
                                <p:ajax update="enddate"/>
                            </p:calendar>

                            <h:outputText value="Kết thúc:"/>
                            <p:calendar id="enddate" value="#{promotionController.selectedPromotion.endDay}" 
                                        navigator="true" yearRange="c-100:c-0" maxdate="31/12/2020" mindate="#{promotionController.selectedPromotion.startDay}"
                                    pattern="dd/MM/yyyy" showOn="button" readonlyInput="true"/>

                            <h:outputText value="Khuyến mãi:"/>
                            <p:spinner value="#{promotionController.selectedPromotion.discount}" min="20000"/>

                            <h:outputText value="Mô tả:"/>
                            <p:inputText value="#{promotionController.selectedPromotion.description}" />



                            <f:facet name="footer">
                                <p:separator/>
                                <p:commandButton id="btnCreateAccept" actionListener="#{promotionController.insert()}" update=":formDataTable, :messages" oncomplete="dialogCreate.hide()" icon="ui-icon-contact" title="Create" value="Create"/>
                                <p:commandButton id="btnCreateCancel" oncomplete="dialogCreate.hide();" icon="icon-create" title="Cancel" value="Cancel"/>
                            </f:facet>
                        </h:panelGrid>
                    </p:dialog>  
                </h:form>
                <h:form id="formUpdate">
                    <p:dialog header="Sửa" widgetVar="dialogUpdate" resizable="false"
                              showEffect="fade" hideEffect="fade" modal="true">  
                        <h:panelGrid id="display" columns="2" styleClass="my-panel-grid">
                            
                            <h:outputLabel value="Tên SP:"/>
                            <p:selectOneMenu value="#{promotionController.selectedPromotion.phoneCode.phone.id}">
                                
                                <f:selectItems value="#{promotionController.phoneList}" var="phoneList" 
                                               itemValue="#{phoneList.id}" itemLabel="#{phoneList.name}"/>
                                <p:ajax update="color"/>
                            </p:selectOneMenu>

                            <h:outputLabel value="Màu:" />
                            <p:selectOneMenu id="color" value="#{promotionController.selectedPromotion.phoneCode.color.id}">
                                
                                <f:selectItems value="#{promotionController.phoneCodeList}" var="phoneCodeList" 
                                               itemValue="#{phoneCodeList.color.id}" itemLabel="#{phoneCodeList.color.name}"/>
                            </p:selectOneMenu>
                            
                            <h:outputText value="Bắt đầu:"/>
                            <p:calendar value="#{promotionController.selectedPromotion.startDay}" 
                                    navigator="true" yearRange="c-100:c-0" maxdate="31/12/2020" 
                                    pattern="dd/MM/yyyy" showOn="button" readonlyInput="true">
                                <p:ajax update="enddate"/>
                            </p:calendar>

                            <h:outputText value="Kết thúc:"/>
                            <p:calendar id="enddate" value="#{promotionController.selectedPromotion.endDay}" 
                                        navigator="true" yearRange="c-100:c-0" maxdate="31/12/2020" mindate="#{promotionController.selectedPromotion.startDay}"
                                    pattern="dd/MM/yyyy" showOn="button" readonlyInput="true"/>

                            <h:outputText value="Khuyến mãi:"/>
                            <p:spinner value="#{promotionController.selectedPromotion.discount}" min="20000"/>

                            <h:outputText value="Mô tả:"/>
                            <p:inputText value="#{promotionController.selectedPromotion.description}" />

                            <f:facet name="footer">
                                <p:separator/>
                                <p:commandButton actionListener="#{promotionController.update()}" id="btnUpdateAccept" update=":formDataTable, :messages" oncomplete="dialogUpdate.hide();" icon="icon-create" title="Update" value="Update"/>
                                <p:commandButton id="btnUpdateCancel" oncomplete="dialogUpdate.hide();" icon="icon-cancel" title="Cancel" value="Cancel"/>
                            </f:facet>
                        </h:panelGrid>  
                    </p:dialog>  
                </h:form>
                <h:form id="formDelete">
                    <p:confirmDialog closable="false" showEffect="fade" hideEffect="fade" severity="alert" widgetVar="confirmation"
                                     message="Xóa khuyến mãi?" header="Xóa khuyến mãi" style="margin:5px auto;">
                        <h:panelGroup layout="block" style="text-align: right">
                            <p:commandButton value="Đồng ý" action="#{promotionController.delete()}" update=":formDataTable, :messages" oncomplete="confirmation.hide();" />
                            <p:commandButton value="Hủy bỏ" oncomplete="confirmation.hide();" />
                        </h:panelGroup>
                    </p:confirmDialog>
                </h:form>
            </ui:define>
        </ui:composition>
    </h:body>
</html>
